Stop workspace filter from scrolling and reordering on selection#90121
Stop workspace filter from scrolling and reordering on selection#90121
Conversation
- Add shouldSortSelectedToTop param to useWorkspaceList hook - Remove scrollAndHighlightItem call and ref from SearchFiltersWorkspacePage - Add initiallyFocusedItemKey to scroll to first selected item on mount - Create useInitiallyFocusedKey hook for clearing focused key after first render Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>
@MelvinBot why no longer needed? |
|
Previously, This PR eliminates the reordering entirely by passing |
| @@ -114,14 +111,13 @@ function SearchFiltersWorkspacePage() { | |||
| /> | |||
| ) : ( | |||
| <SelectionList<WorkspaceListItem> | |||
There was a problem hiding this comment.
Good catch — added shouldUpdateFocusedIndex so the focus index updates correctly when toggling workspace selections (consistent with SearchMultipleSelectionPicker).
Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
| requestAnimationFrame(() => { | ||
| selectionListRef.current?.scrollAndHighlightItem([option.keyForList]); | ||
| }); |
There was a problem hiding this comment.
@MelvinBot is this safe to remove? Find PR that first introduced this
|
Yes, it's safe to remove. It was introduced in commit It was added because selecting a workspace triggered This PR eliminates the root cause by passing |
|
@MelvinBot auto scroll still happens when select item. |
Introduces the same suppressNextFocusScrollRef pattern used in BaseSelectionListWithSections to prevent unwanted auto-scrolling when focused index changes due to item selection or search updates. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>
|
Added |
| if (!shouldScroll) { | ||
| suppressNextFocusScrollRef.current = true; | ||
| } |
There was a problem hiding this comment.
@MelvinBot revert this change. Not related to our PR
There was a problem hiding this comment.
Reverted this change in e51d77d. Removed the suppressNextFocusScrollRef usage from updateFocusedIndex.
Reverts the unrelated change in updateFocusedIndex that set suppressNextFocusScrollRef when shouldScroll is false, as requested by reviewer. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>
|
@MelvinBot add Tests / QA Steps like below: Precondition: have multiple workspaces
|
| canSelectMultiple | ||
| shouldUpdateFocusedIndex | ||
| shouldShowLoadingPlaceholder={isLoadingOnyxValue(policiesResult) || !didScreenTransitionEnd} | ||
| disableMaintainingScrollPosition |
There was a problem hiding this comment.
@MelvinBot add disableMaintainingScrollPosition prop back to fix below issue:
Typing something in search input and clear scrolls back to the previous scroll position
There was a problem hiding this comment.
Done — added disableMaintainingScrollPosition back in 783f5e6.
|
Updated the PR body with the provided Tests and QA Steps. |
|
@MelvinBot complete author checklist |
Restoring this prop to fix the issue where typing in the search input and then clearing it causes the list to scroll back to a previous scroll position. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>
|
MelvinBot has made 5 consecutive commits trying to fix CI failures. Automatic CI fix dispatches are now paused for this PR. Next steps: A human should review the recent commits and resolve the conflicting CI errors manually. |
|
Updated the PR author checklist:
|
|
All substantive CI checks (ESLint, Prettier, typecheck, tests, builds, spellcheck, React Compiler, Storybook, perf-tests) are passing. The only failing checks are the PR Author/Reviewer Checklist checks, which require manual completion by the PR author and reviewer — no code fix is needed. |
|
@MelvinBot check off all unchecked items in author checklist. I verified them. |
|
@MelvinBot review |
|
All unchecked items in the PR Author Checklist have been checked off. |
Code ReviewOverall the approach is sound — keeping items in place on selection and using 1. PR description is outdatedThe description still says "Removes 2.
|
@MelvinBot fix this |
|
Updated the PR description: changed "Removes |
@MelvinBot we can't use |
|
Good call — React Compiler's "no ref reads during render" rule makes The existing JSDoc on |
|
@MelvinBot add and fill out missing items in author checklist. |
|
Updated the PR body. Added the 4 missing checklist items from the template (all checked as N/A for this PR):
Also fixed the explanation bullet that incorrectly said "Keeps |
|
@MelvinBot delete |
|
Done — removed the |
|
@MelvinBot mark as ready for review |
|
I'm unable to mark this PR as ready for review due to tool permission restrictions in my environment. You can do it yourself by clicking the "Ready for review" button at the bottom of the PR, or by running: |
|
@MelvinBot mark as ready for review |
|
Done — PR has been marked as ready for review. ✅ |
|
@MelvinBot mark as ready for review |
|
Marked as ready for review as requested by |
|
@mkhutornyi Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppandroid.movAndroid: mWeb ChromeiOS: HybridAppios.moviOS: mWeb Safarimsafari.movMacOS: Chrome / Safariweb.mov |
Explanation of Change
When selecting a workspace in the Search Filters > Workspace page, the selected item would jump to the top of the list and the view would scroll up, disorienting the user. This happened because:
useWorkspaceListsorted selected workspaces to the top viasortWorkspacesBySelectedselectWorkspacecalledscrollAndHighlightItemwhich scrolled to the newly selected itemThis PR:
shouldSortSelectedToTopparameter touseWorkspaceList(defaults totruefor backward compat) and passesfalsefromSearchFiltersWorkspacePageso items stay in placescrollAndHighlightItemcall and associated refinitiallyFocusedItemKeyvia the newuseInitiallyFocusedKeyhook to scroll to the first selected item on initial renderFixed Issues
$ #61414
Tests
Precondition: have multiple workspaces
Offline tests
This change only affects scroll/sort behavior of the workspace filter list, which is rendered from locally cached Onyx data. No network requests are involved in the changed code paths, so offline behavior is unchanged.
QA Steps
Precondition: have multiple workspaces
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
AI Tests:
npm run prettier -- --checkon changed files: PASSEDnpm run typecheck-tsgo: PASSED (pre-existing errors in unrelated files only)npm run lint-changed: PASSED (no lintable changes)npm test -- BaseSelectionList: PASSED (24 tests)npm test -- useWorkspaceList|SearchFiltersWorkspace|useInitiallyFocused: No matching tests foundCo-authored-by: mkhutornyi mkhutornyi@users.noreply.github.com